import React, { Component, createRef } from 'react'

export default class App extends Component {

    // 创建一个 ref 属性
    // inpRef = React.createRef()
    inpRef = createRef()

    render() {
        return (
            <div>
                {/* 改写发在开启严格模式后，有警告信息，是不安全的 */}
                {/* <input type="text" ref={'inp'} id='a' /> */}

                <input type="text" ref={this.inpRef} />

                <button onClick={() => {
                    // 通过查找 DOM 元素，然后获取到输入的 value 值
                    // console.log(document.querySelector('#a').value);


                    // 该方法通过设置一个固定的 ref ，然后进行使用，不被推荐
                    // console.log(this.refs.inp.value);

                    // 通过 createRef 来获取我们绑定的输入框
                    // .current 就是找到被绑定的输入框
                    console.log(this.inpRef.current.value);


                }}>点击获取输入的内容</button>

            </div>
        )
    }
}
